<template>
	<div class="PublicPraise" v-cloak>
		<ul class="nav">
			<li :class="{active:active===index}"
				v-for="(item,index) in navList.nav"
				:key="index"
				@click="handleChangeView(index);close(index)">{{item}}</li>
			
		</ul>
		<keep-alive>
			<component :is="currentTabComponent" ></component>
		</keep-alive>
	</div>
</template>

<script>
	import List0 from './List0'
	import List1 from './List1'
	import List2 from './List2'
	import List3 from './List3'
	
	
	export default{
		name:"PublicPraise",
		components:{
			 List0,
			 List1,
			 List2,
			 List3,
		},
		data(){
			return{
				currentTabComponent:List0,
				active:0,
				navList:{},
			}
		},
		methods:{
			handleChangeView(component)
			{
				this.currentTabComponent='List'+component;
			},
			close(i)
			{
				this.active=i;
			}
		},
		mounted(){
			this.$http.get('/api/Details.json')
			.then((res)=>{
				let data=res.data
				this.navList=data.commentList
			})
		}
	}
</script>

<style lang="scss" scoped>
.PublicPraise{
	.nav{
		display:flex;
		justify-content:space-around;
		align-items: center;
		flex:1;
		height:70px;
		border-top:1px solid #dddddd;
		
		li{
			width: 137px;
			height: 50px;
			border-radius: 18px;
			background: #999999;
			color: #FFFFFF;
			font-size: 23.96px;
			text-align: center;
			line-height: 50px;
			
		}
		.active{
			background: #ff9900;
		}
	}
}
</style>